<template>
  <div>
    <div class="stu-leave-container">
        请假申请
    </div>
    <!-- 请假类型 -->
    <LeaveTypePicker
      @saveValue="saveLeaveType"
    />
    <!-- 开始时间 -->
    <DateTimePicker
      :dateTime="{time: getNowDate}"
      @saveValue="saveStartTime"
    />
    <!-- 结束时间 -->
    <DateTimePicker
      :dateTime="endtDate"
      :title="endPickerTitle"
      @saveValue="saveEndTime"
    />
    <div class="leave-note-box">
      <span>*</span>
      <span>请假事由</span>
      <span>
        <van-field
          v-model="queryForm.adderss"
          rows="1"
          autosize
          maxlength="80"
          type="textarea"
          placeholder="请输入"
        />
      </span>
    </div>
    <div class="bottom-submit-box">
      <div class="cancel_btn item" @click="$router.go(-1)">取消</div>
      <div class="submit_btn item" @click="submitLeave">提交</div>
    </div>
  </div>
</template>
<script>
import { Toast } from 'vant'
export default {
  data() {
    return {
      startDate: {
        time: '',
      },
      endtDate: {
        time: '',
      },
      endPickerTitle: '结束时间',
      queryForm: {}, // 请假参数
    }
  },
  computed: {
    getNowDate() {
      let date = new Date()
      let y = date.getFullYear()
      let m = (date.getMonth() + 1).toString().padStart(2, '0')
      let d = date.getDate().toString().padStart(2, '0')
      let H = date.getHours()
      return y + '-' + m + '-' + d + ' ' + H + ':' + '00'
    },
  },
  created() {
    this.queryForm.start_time = this.getNowDate
  },
  methods: {
    saveEndTime(value) {
      this.queryForm.end_time = value
    },
    saveStartTime(value) {
      this.queryForm.start_time = value
    },
    saveLeaveType(value) {
      this.queryForm.address = value
    },
    submitLeave() {
      /* 提交 */
      debugger
      this.queryForm.staff_id = '2'
      this.$api.student.saveLeave(this.queryForm).then(res=> {
        if (res.code === '200') {
          Toast.success('提交成功')
        } else {
          Toast.fail(res.msg)
        }
      })
    },
  },
}
</script>
<style lang="scss" scoped>
.stu-leave-container {
  width: 100vw;
  height: 60px;
  display: grid;
  place-items: center;
  font-size: 16px;
  font-family: PingFangSC-Medium, PingFang SC;
  font-weight: 500;
  color: #FFFFFF;
  background: url('~images/common/screen_title_bg.png') no-repeat;
  background-size: 100% 100%;
}
.bottom-submit-box {
    position: fixed;
    bottom: 0;
    left: 0;
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    height: 60px;
    padding: 0 20px;
    background: #FFFFFF;
    .item {
      width: 160px;
      height: 40px;
      border-radius: 5px;
      display: grid;
      place-items: center;
    }
    .cancel_btn {
      font-size: 14px;
      font-family: PingFangSC-Semibold, PingFang SC;
      font-weight: 600;
      color: #136FD1;
      border: 1px solid #BAC2D6;
    }
    .submit_btn {
      background: #2A529F;
      font-size: 14px;
      font-family: PingFangSC-Semibold, PingFang SC;
      font-weight: 600;
      color: #FFFFFF;
    }
  }
  .leave-note-box {
  position: relative;
  height: 100px;
  margin-bottom: 5px;
  background: #FFFFFF;
  span {
    position: absolute;
    &:first-child {
      top: 10px;
      left: 20px;
      color: red;
      font-size: 13px;
    }
    &:nth-child(2) {
      top: 10px;
      left: 36px;
      font-size: 12px;
      font-family: PingFangSC-Regular, PingFang SC;
      font-weight: 400;
      color: #8c97b2;
    }
    &:nth-child(3) {
      left: 20px;
      bottom: 0px;
      width: calc(100% - 22px);
    }
  }
}
</style>